<template>
  <div>
    <div class="search-div">
      <el-form label-width="90px" size="small">
        <el-row>
          <el-col :span="22">
            <el-form-item label="输入搜索信息">
              <el-input v-model="keywordText"/>
            </el-form-item>
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="1">
            <el-button type="primary" size="small" @click="fetchData()">
              搜索
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div ref="chart" style="width: 100%; height: 500px"></div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus"
import {analyzeQuestion, generateReport} from "@/api/order/orderReport.js";

onMounted(async () => {
  await fetchData();
});

const chart = ref();
const keywordText = ref("目前最畅销商品排行");
const fetchData = async () => {
  ElMessage.success("正在进行语义解析...")
  const {data: questionMap} = await analyzeQuestion(keywordText.value);
  const {cacheKey, countKeyword, groupKeyword} = questionMap;
  ElMessage.success(`将为您以${groupKeyword}进行分组，以${countKeyword}进行统计，请稍候...`)
  const {data: xyMap} = await generateReport(cacheKey);
  ElMessage.success("正在生成报表...")
  setChartOption(xyMap);
};

const setChartOption = (xyMap) => {
  const myChart = echarts.init(chart.value);
  const {xList, yList, yName} = xyMap;

  // 指定图表的配置项和数据
  const option = {
    title: {
      text: "订单动态统计",
    },
    tooltip: {},
    legend: {
      data: ["订单相关信息总量"],
    },
    xAxis: {
      data: xList,
    },
    yAxis: {},
    series: [
      {
        name: yName,
        type: "bar",
        data: yList,
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};
</script>
<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>
